<template>
  <div style="height: 100%">
    <div class="header">
      <el-menu :default-active="modelValue" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="formSetting" @click="to('formSetting')">① 审批表单</el-menu-item>
        <el-menu-item index="processDesign" @click="to('processDesign')">② 审批流程</el-menu-item>
      </el-menu>
      <div class="publish">
        <el-button size="default" @click="save">
          <el-icon><FolderChecked /></el-icon>
          &nbsp;&nbsp;保存
        </el-button>
        <el-button size="default" type="primary" @click="publish">
          <el-icon><Promotion /></el-icon>
          &nbsp;&nbsp;发布
        </el-button>
      </div>
      <div class="back">
        <el-button @click="exit" :icon="ArrowLeft" circle></el-button>
        <!-- <icon :key="setedup.logo.icon" :name="setedup.logo.icon" :style="'background:' + setedup.logo.background"></icon> -->

        <span>{{ setedup.formName }}</span>
      </div>
    </div>

    <el-dialog title="请使用手机扫码预览" v-model="viewCode" width="300px" :close-on-click-modal="false" center>
      <img src="/@/assets/code.png" width="250" height="250" />
    </el-dialog>
  </div>
</template>

<script>
import { reactive, computed, onMounted, toRefs } from 'vue'
import { useRouter } from 'vue-router';
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia';
import { ElMessage, ElMessageBox } from 'element-plus'
import { FolderChecked, Promotion, ArrowLeft } from '@element-plus/icons-vue'

export default {
    name: 'LayoutHeader',
    props: {
        modelValue: {
            type: String,
            default: String
        }
    },
    emits: ['publish', 'save', 'update:modelValue'],
    components: {
      FolderChecked,
      Promotion,
    },
    setup(props, context) {
        const storesWorkFlowConfig = useWorkFlowConfig()
        const workFlowConfig = storeToRefs(storesWorkFlowConfig)
        const router = useRouter()
        const state = reactive({
            viewCode: false
        })
        const setedup = computed(() => {
            return workFlowConfig.design
        })
        const check = () => {
            if (workFlowConfig.isEdit === null) {

            }
        }
        const closeBefore = () => {
            //alert("您将要离开本页")
            return false
        }
        const listener = () => {
            window.onunload = closeBefore()
            window.onbeforeunload = closeBefore()
        }
        const publish = () => {
            context.emit('publish')
        }
        const save = () => {
            context.emit( 'save')
        }
        const exit = () => {
            ElMessageBox.confirm('未发布的内容将不会被保存，是否直接退出 ?', '提示',{
                confirmButtonText: '退出',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                router.go(-1)
            }).catch({})
        }
        const handleSelect = (key, keyPath) => {
          console.log(key, keyPath)
        }
        const to = (path) => {
          context.emit('update:modelValue', path)
        }
        onMounted(() => {
            if (document.body.offsetWidth <= 970) {
                ElMessageBox.alert('本设计器未适配中小屏幕，建议您在PC电脑端浏览器进行操作')
            }
            check()
            listener()
        })
        return {
            ...toRefs(state),
            ArrowLeft,
            publish,
            save,
            exit,
            handleSelect,
            to,
            setedup
        }
    }
}
</script>

<style scoped lang="scss">
:deep(.header) {
  // min-width: 900px;
  position: relative;
  height: 100%;
  .el-menu {
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: transparent;
    border-bottom: solid 1px var(--el-menu-border-color) !important; 
    .el-menu-item.is-active {
      color: var(--el-color-primary) !important;
    }
    .el-menu-item {
      background-color: transparent !important;
      height: 100% !important;
    }
  }

  .publish {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 1000;

    :deep(.icon) {
      margin-right: 6px;
    }

    button {
      border-radius: 15px;
    }
  }
}

.back {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 1000;
  top: 10px;
  left: 20px;
  font-size: small;

  :deep(.icon) {
    border-radius: 10px;
    padding: 7.8px;
    font-size: 20px;
    color: #ffffff;
    margin: 0 10px;
  }
}
</style>